<template>
  <div class="song-card" v-if="songs">
    <el-table :data="songs" style="width: 100%" @row-click="onRowClick" header-cell-class-name="title-th">
      <el-table-column prop="index" width="60">
        <template slot-scope="scope">
          <Icon v-if="currentSong.id == scope.row.id" class="horn" type="horn" color="theme" />
          <span v-else class="song-order">{{ $utils.pad(scope.$index + 1) }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="img" width="100">
        <template slot-scope="scope">
          <div class="song-img-wrap">
            <img v-lazy="$utils.genImgUrl(scope.row.img, 120)" />
            <PlayIcon class="play-icon" />
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="name" label="音乐标题">
        <template slot-scope="scope">
          <div class="song-table-name-cell">
            <span class="song-table-name" :class="{ 'active-row': currentSong.id == scope.row.id }">{{ scope.row.name }}</span>
            <Icon v-if="scope.row.mvId != 0" class="mv-icon" type="mv" :mvId="scope.row.mvId" color="theme" :size="18" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="artistsText" label="歌手"> </el-table-column>
      <el-table-column prop="albumName" label="专辑"> </el-table-column>
      <el-table-column label="时长" width="100">
        <template slot-scope="scope">
          <span>{{ $utils.formatTime(scope.row.durationSecond) }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from '@/store/helper/music'
export default {
  name: 'SongCard',
  props: ['songs'],
  methods: {
    onRowClick(row) {
      this.startSong(row)
      this.setPlaylist(this.songs)
    },
    ...mapMutations(['setPlaylist']),
    ...mapActions(['startSong'])
  },
  computed: {
    ...mapState(['currentSong'])
  }
}
</script>
<style lang='scss' scoped>
.song-card {
  .song-img-wrap {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    margin-right: 8px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 6px;
    }

    .play-icon {
      @include abs-center;
    }
  }

  /deep/.el-table {
    .song-order,
    .title-th {
      color: var(--font-color-grey2);
      font-weight: normal;
    }

    .song-table-name-cell {
      @include text-ellipsis;
      display: flex;
      align-items: center;
      flex: 0 0 24px;
      margin-bottom: 8px;

      .active-row {
        color: $theme-color;
      }

      .song-table-name {
        max-width: 180px;
        overflow: hidden;
        @include text-ellipsis;
      }

      .mv-icon {
        width: 24px;
        margin-left: 4px;
      }
    }
  }
}
</style>